<template>
  <nav-bar>
    <div slot="left" class="navBarImg" @click="NavBarClick"><img src="~assets/images/detail/Detail.png" alt="返回上一页"></div>
    <div slot="center" class="centerItem">
      <div v-for="(item,index) in shopping" class="shoppingItem" :class="{active: currentIndex === index}" @click="shoppingClick(index)">{{item}}</div>
    </div>
  </nav-bar>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar";

  export default {
    name: "DetailNavBar",
    components: {
      NavBar
    },
    data(){
      return {
        currentIndex: 0
      };
    },
    props: {
      shopping: {
        type: Array,
        default(){
          return [];
        }
      }
    },
    methods: {
      /**
       * 点击切换显示信息
       */
      shoppingClick(index){
        this.currentIndex = index;

        this.$emit("tooleClick",index);
      },
      /**
       * 返回上一页
       * @constructor
       */
      NavBarClick(){
        this.$router.back();
      }
    }
  }
</script>

<style scoped>
  .navBarImg{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 49px;
  }
  .navBarImg img{
    width: 20px;
    height: 20px;
  }
  .centerItem{
    display: flex;
    font-size: 14px;
  }
  .centerItem .shoppingItem{
    flex: 1;
  }
  .active{
    color: var(--color-tint);
  }
</style>